<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色列表</title>
    <#include "/layout/css.html"/>
    <link rel="stylesheet" href="${basePath}/ztree/css/demo.css">
    <link rel="stylesheet" href="${basePath}/ztree/css/zTreeStyle/zTreeStyle.css">
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
	<form class="layui-form" action="" id="formId"  onsubmit="return false">
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width: 120px;">${systemName!'菜单'}id </label>
	    <div class="layui-input-inline" style="width: 500px;">
	      <input type="text" name="sysMenuId" readonly="readonly" value="${data.sysMenuId!}"  class="layui-input">
	      <input type="hidden" name="systemId" readonly="readonly" value="${systemId!}"  class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width: 120px;">${systemName!'菜单'}名称</label>
	    <div class="layui-input-inline" style="width: 500px;">
	      <input lay-verify="required" type="text" name="name" value="${data.name!}" autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  
	  <div class="layui-form-item" style="display: none;">
	    <label class="layui-form-label" style="width: 120px;">${systemName!'菜单'}类型</label>
	    <div class="layui-input-inline" style="width: 500px;">
		  <input type="radio"  lay-filter="filter" name="menuType" value="2" checked title="按钮" lay-verify="required" >
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width: 120px;">父级菜单</label>
	    <div class="layui-input-inline" style="width: 500px;">
	      <input type="hidden" id="parentId" name="parentId" value="${data.parentId!}"  autocomplete="off" class="layui-input"/>
	      <input id="parentIdName" readonly="readonly"   type="text" name="parentName" value="${parentName!}"  autocomplete="off" class="layui-input"/>
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width: 120px;">${systemName!'菜单'}排序</label>
	    <div class="layui-input-inline" style="width: 500px;">
	      <input lay-verify="required | number" maxlength="3" type="text" name="sortNum"  value="${data.sortNum!100}" required lay-verify="required"   autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width: 120px;">${systemName!'菜单'}资源图标</label>
	    <div class="layui-input-inline" style="width: 500px;">
	      <input type="text" name="icon" value="${data.icon!}"   autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  <div class="layui-form-item" style="display: none">
	    <label class="layui-form-label" style="width: 120px;">${systemName!'菜单'}简介</label>
	    <div class="layui-input-inline" style="width: 500px;">
	      <input type="text" name="description" value="${data.description!}"   autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux"></div>
	  </div>
	  <div class="layui-form-item" id="buttonMarkId" >
	    <label class="layui-form-label" style="width: 120px;">按钮标签</label>
	    <div class="layui-input-inline" style="width: 150px;">
	    	<input lay-verify="required" id="buttonMarkInputId" type="text" name="buttonMark" value="${data.buttonMark!}"   autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux" style="width: 520px;">
		    <#if buttonMarkList??>
		    	<#list buttonMarkList as x>
		    		<button title="点击之后赋值(省时省力省麻烦)" onclick="setInputVal('buttonMarkInputId','${x.val!}')" class="layui-btn layui-btn-primary layui-btn-sm">${x.name!}</button>
		    	</#list>
		    </#if>
		 </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block" style="width: 500px;">
	      <button class="layui-btn" lay-submit id="addOrEditFun" lay-filter="*">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
</div>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
	<ul id="treeDemo" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
</div>
<!-- 表格 -->
<#include "/layout/js.html"/>
<script type="text/javascript" src="${basePath}/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${basePath}/ztree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript">
		var setting = {
				check: {
					enable: true,
					chkStyle: "radio",
					radioType: "all",
					autoCheckTrigger: true
				},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: onClick,
				onCheck: onCheck
			}
		};

		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return false;
		}

		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			nodes = zTree.getCheckedNodes(true);
			console.log(nodes);
			
			$("#parentIdName").attr("value", "");
			$("#parentId").attr("value", "");
			if (nodes.length ==1 ) {
				$("#parentIdName").attr("value", nodes[0].name);
				$("#parentId").attr("value", nodes[0].id);
			}
			hideMenu();
		}

		function showMenu() {
			var cityObj = $("#parentIdName");
			var cityOffset = $("#parentIdName").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "parentIdName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		function initZtree() {
			authManagerHttp({url:"/menu/listData",data:{"sysMenuId":"${systemId!}"}},{all:function(data){
        		if(data.isOk){
        			var zNodes =new Array();
        			for (var i=0;i<data.data.records.length;i++)
        			{	
        				var zNode = new Object();
        				zNode.id=data.data.records[i].sysMenuId;
        				zNode.pId=data.data.records[i].parentId;
        				zNode.name=data.data.records[i].name;
        				zNode.open=true;
        				zNode.checked=false;
        				zNode.nocheck=false;
        				if(data.data.records[i].sysMenuId == '${data.parentId!}'){
        					zNode.checked=true;
        				}
        				if(data.data.records[i].sysMenuId == '${data.sysMenuId!}'){
        					zNode.nocheck=true;
        				}
        				if(data.data.records[i].menuType == 2){
        					zNode.nocheck=true;
        				}
        				zNodes[i]=zNode;
        			}
        			console.log(zNodes);
        			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
            	}else{
            		layer.msg(data.message,{time: 3000});
            	}
        	}})
		}
		

		
		$(document).ready(function(){
			initZtree();
		});
</script>
<script type="text/javascript">
    // layui方法
    layui.use(['table', 'form', 'layer', 'vip_table'], function () {
        // 操作对象
        var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTable = layui.vip_table
                , $ = layui.jquery;
        var table = layui.table;
        //第一个实例
        function addOrEditFun(){
        	authManagerHttp({url:"/menu/addOrEditData",data:$("#formId").serialize()},null)
        }
        form.on('submit(*)', function(data){
        	addOrEditFun();
        	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
		form.on('radio(filter)', function(data){
			  console.log(data.elem); //得到radio原始DOM对象
// 			  console.log(data.value); //被点击的radio的value值
// 			  if(data.value == 2){
// 				  $("#buttonMarkId").show();
				  
// 				  $("#pageUrlId").hide();
// 				  $("#pageUrlTypeId").hide();
// 				  $("#siteId").hide();
// 			  }else{
// 				  $("#buttonMarkId").hide();
				  
// 				  $("#pageUrlId").show();
// 				  $("#pageUrlTypeId").show();
// 				  $("#siteId").show();
// 			  }
		}); 
        $('#parentIdName').on('click', function(){
        	showMenu();
		});
        
        
    });
</script>

</body>
</html>